<template>
  <div class="orderDetails">
      <div class="orderInfo">
          <div class="title">
              <p>{{this.carInfo}}</p>
          </div>

          <div class="driverInfo">
              <div class="driverImg">
                  <img src="../../../static/img/sijitu.png" alt="">
              </div>
              <p class="drivernm">{{this.driverName}}</p>
              <p>{{this.carNum}}&nbsp;&nbsp;&nbsp;{{this.carModel}}</p>
              <div class="star">
                  <div class="starlis">
                      <ul>
                          <li>
                              <img src="../../assets/images/daxingxing@2x.png" alt="">
                          </li>
                          <li>
                              <img src="../../assets/images/daxingxing@2x.png" alt="">
                          </li>
                          <li>
                              <img src="../../assets/images/daxingxing@2x.png" alt="">
                          </li>
                          <li>
                              <img src="../../assets/images/daxingxing@2x.png" alt="">
                          </li>
                          <li>
                              <img src="../../assets/images/daxingxing@2x.png" alt="">
                          </li>
                      </ul>
                      <span>{{this.rated}}单</span>
                  </div>
              </div>
              <div class="phone">
                  <a href="tel:10086">
                      <img src="../../assets/images/dianhua@2x的副本.png" alt="">
                  </a>
              </div>

          </div>
          <div class="remind">
              <span>
                  <img src="../../../static/img/qiche03@3x.png" alt="">
              </span>
              <div>
                 <p>本次行程将由{{this.driverName}}为您服务,请保持电话通畅,他将准时来接您</p>
              </div>
          </div>
      </div>
  </div>
</template>
<script>
import {mapGetters} from 'vuex'
export default {
  data () {
    return {
      carInfo: '已派车'
    //   drivername: '徐师傅',
    //   carNum: '鄂A23U21',
    //   models: '大众',
    //   singleNum: '48'
    }
  },
  computed: {
    ...mapGetters([
      'driverName',
      'driverPhone',
      'carModel',
      'carNum',
      'rates',
      'rated'
    ])
  }
}
</script>
<style lang="css" scoped>
.orderDetails{
    width: 100%;
    height: 100%;
}
.orderInfo{
    width: 90%;
    position: fixed;
    left: 5%;
    bottom:10px;
    box-shadow: 0 0 10px rgb(153, 153, 153);
    background-color: #fff;
}
.orderInfo .title{
    height: 35px;
    border-bottom: 1px solid rgb(153, 153, 153);
}
.orderInfo .title p{
    width: 100%;
    height: 100%;
    font-size: 14px;
    line-height: 35px;
}
.driverInfo{
    position: relative;
    height: 90px;
    border-bottom: 1px solid rgb(153, 153, 153);
}
.driverInfo .driverImg{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: absolute;
    top: 15px;
    left: 15px;
}
.driverInfo .driverImg img{
    width: 100%;
    height: 100%;
}
.driverInfo .phone{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    position: absolute;
    right: 30px;
    top: 20px;
}
.driverInfo .phone a img{
    width: 100%;
}
.driverInfo p{
   text-align: left;
   padding-left: 80px;
   line-height: 30px;
   font-size: 14px;
}
.driverInfo .star{
    height: 20px;
    padding-left: 75px;
}
.driverInfo .star .starlis ul li{
    float: left;
    width: 20px;
    margin-right: 5px;
    height: 20px;
}
.driverInfo .star .starlis ul li img{
    width: 100%;
    height: 100%;
}
.driverInfo .star .starlis span{
    float: left;
    line-height: 25px;
}
.remind{
    padding: 15px;
    padding-left: 20px;
}
.remind span{
    width: 40px;
    height: 40px;
    float: left;
    margin-top: 5px;
}
.remind span img{
    width: 100%;
    height: 100%;
}
.remind div{
    padding-left: 50px;
}
.remind p{
    border: 1px solid rgb(153, 153, 153);
    border-radius: 5px;
    line-height: 25px;
    text-align: left;
    padding: 0 5px;
    font-size: 14px;
}
</style>